{php $newUI = true;}
{template 'common/header'}
<ul class="nav nav-tabs">
	<li {if $do == 'display'}class="active"{/if}><a href="{php echo url('mc/fangroup/display');}">粉丝分组</a></li>
</ul>
{if $do == 'display'}
<style>
	.material-list .img{overflow:hidden; position:relative; height:160px;}
	.material-list .img img{max-height:160px; max-width:100%; vertical-align:middle;}
	.material-list .img span{display:block; position:absolute; bottom:0; left:0; height:28px; line-height:28px; width:100%; background:rgba(0,0,0,0.7); color:#fff; padding:0 10px;}
	.material-list .panel-group .panel:first-child{margin:0; border-bottom-left-radius:0; border-bottom-right-radius:0;}
	.material-list .panel-group .panel+.panel{border-radius:0; margin-top:0; border-top:0;}
	.material-list .panel-group .panel+.panel .panel-body{height:104px; padding-right:105px; position:relative; overflow:hidden;}
	.material-list .panel-group .panel+.panel .img{float:right; position:absolute; right:15px; top:12px; height:80px;}
	.material-list .panel-group .panel+.panel .img img{max-width:80px; max-height:104px; vertical-align:middle; margin-left:10px;}
	.material-list .panel-group .panel+.panel .text h4{word-break:break-all; font-size:14px; line-height:1.5em;}
	.material-list .panel-group .panel:last-child{margin-bottom:20px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
</style>
<div class="material-list clearfix">
	<div style="margin-bottom:20px">
		<a href="javascript:;" class="btn btn-primary btn-batch-export" data-type="news">转换为图文关键字</a>
		<a href="javascript:;" class="btn btn-success btn-batch-export" data-type="article">转换为文章</a>
	</div>
	{$page}
	<div class="water-container" style="position: relative;margin-top:15px">
		{if !empty($data['data'])}
		{loop $data['data'] $da}
		<div class="water col-xs-6 col-sm-3 col-md-3 panel-group">
			{loop $da['content']['news_item'] $k $li}
				{if !$k}
					<div class="panel panel-default">
						<div class="panel-body" onclick="window.location.href='{$li['url']}'">
							<div class="img">
								<img src="{$li['thumb_cover']}">
								<span>{$li['title']}</span>
							</div>
						</div>
					</div>
				{else}
					<div class="panel panel-default" style="margin-top:0;">
						<div class="panel-body clearfix" onclick="window.location.href='{$li['url']}'">
							<div class="text">
								<h4>{$li['title']}</h4>
							</div>
							<div class="img">
								<img src="{$li['thumb_cover']}">
							</div>
						</div>
					</div>
				{/if}
			{/loop}
			<div class="panel panel-default" style="margin-top:0;">
				<div class="panel-footer text-center">
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-default">
							<input type="checkbox" value="{$da['media_id']}" name="media_id[]">
						</button>
						<a href="javascript:;" class="btn btn-default btn-export" data-type="news" data-media_id="{$da['media_id']}" style="line-height:22px;">转为图文</a>
						<a href="javascript:;" class="btn btn-default btn-export" data-type="article" data-media_id="{$da['media_id']}" style="line-height:22px;">转为文章</a>
						<a href="javascript:;" class="btn btn-default btn-del" data-media_id="{$da['media_id']}" style="line-height:22px;">删除</a>
					</div>
				</div>
			</div>
		</div>
		{/loop}
		{/if}
	</div>
</div>
{/if}
<script>
	require(['jquery.wookmark'], function(wookmark) {
		$('.water').wookmark({
			align: 'left',
			autoResize: true
		});
		//删除素材
		$('.btn-del').click(function(){
			if(!confirm('删除后将不可恢复， 确定删除吗')) {
				return false;
			}
			var media_id = $(this).attr('data-media_id');
			$.post("{php echo url('material/display/delete')}", {'media_id':media_id}, function(data){
				var data = $.parseJSON(data);
				if(data.errno < 0) {
					util.message(data.message, '', 'error');
					return false;
				} else {
					location.reload();
				}
			})
		});

		//转为图文或文章
		$('.btn-export').click(function(){
			var media_id = $(this).attr('data-media_id');
			var type = $(this).attr('data-type');
			if(media_id && type) {
				util.loading();
				$.post("{php echo url('material/display/export')}", {'media_id':media_id, 'type':type}, function(data){
					var data = $.parseJSON(data);
					if(data.errno < 0) {
						util.loaded();
						util.message(data.message, '', 'error');
						return false;
					} else {
						util.loaded();
						util.message('转换成功', '', 'success');
						return false;
					}
				})
			}
		});

		$('.btn-batch-export').click(function(){
			if($(":checkbox:checked").size() <= 0){
				util.message('没有选择素材', '', 'error');
				return;
			}
			var media_ids = [];
			$(':checkbox:checked').each(function(){
				var media_id = $.trim($(this).val());
				if(media_id) {
					media_ids.push(media_id);
				}
			});
			var type = $(this).attr('data-type');
			var success = 0;
			util.loading();
			var batch_export = function(){
				var media_id = media_ids.pop();
				if(!media_id) {
					util.loaded();
					util.message('转换成功', '', 'success');
					return false;
				}
				$.post("{php echo url('material/display/export')}", {'media_id':media_id, 'type':type}, function(data){
					var data = $.parseJSON(data);
					if(data.errno >= 0) {
						success++;
					}
					setTimeout(function(){batch_export()}, 2000);
				})
			}
			batch_export();
		});
	});
</script>
{template 'common/footer'}
